<template>
	<div class="patientCount">
		<div class="title">
			<p>康恒医院患者数量周统计表</p>
		</div>



		<div class="tableCount">
			<el-table :data="table1" height="327" show-summary :summary-method="getSummaries" border
				style="width:330px">
				<el-table-column label="星期一">
					<el-table-column prop="department" :summary-method="getSummaries" label="科室"
						width="120"></el-table-column>
					<el-table-column prop="date" label="就诊日期" width="120">
						<template slot-scope="scope">
							{{ formatDate(scope.row.date) }}
						</template>
					</el-table-column>
					<el-table-column prop="number" label="就诊人数" width="120"></el-table-column>
				</el-table-column>
			</el-table>
		</div>
		<div class="tableCount">
			<el-table :data="table2" height="327" show-summary :summary-method="getSummaries" border
				style="width:330px">
				<el-table-column label="星期二">
					<el-table-column prop="department" label="科室" width="120"></el-table-column>
					<el-table-column prop="date" label="就诊日期" width="120">
						<template slot-scope="scope">
							{{ formatDate(scope.row.date) }}
						</template>
					</el-table-column>
					<el-table-column prop="number" label="就诊人数" width="120"></el-table-column>
				</el-table-column>
			</el-table>
		</div>
		<div class="tableCount">
			<el-table :data="table3" height="327" show-summary :summary-method="getSummaries" border
				style="width:330px">
				<el-table-column label="星期三">
					<el-table-column prop="department" label="科室" width="120"></el-table-column>
					<el-table-column prop="date" label="就诊日期" width="120">
						<template slot-scope="scope">
							{{ formatDate(scope.row.date) }}
						</template>
					</el-table-column>
					<el-table-column prop="number" label="就诊人数" width="120"></el-table-column>
				</el-table-column>
			</el-table>
		</div>
		<div class="tableCount">
			<el-table :data="table4" height="327" show-summary :summary-method="getSummaries" border
				style="width:330px">
				<el-table-column label="星期四">
					<el-table-column prop="department" label="科室" width="120"></el-table-column>
					<el-table-column prop="date" label="就诊日期" width="120">
						<template slot-scope="scope">
							{{ formatDate(scope.row.date) }}
						</template>
					</el-table-column>
					<el-table-column prop="number" label="就诊人数" width="120"></el-table-column>
				</el-table-column>
			</el-table>
		</div>
		<div class="tableCount">
			<el-table :data="table5" height="327" show-summary :summary-method="getSummaries" border
				style="width:330px">
				<el-table-column label="星期五">
					<el-table-column prop="department" label="科室" width="120"></el-table-column>
					<el-table-column prop="date" label="就诊日期" width="120">
						<template slot-scope="scope">
							{{ formatDate(scope.row.date) }}
						</template>
					</el-table-column>
					<el-table-column prop="number" label="就诊人数" width="120"></el-table-column>
				</el-table-column>
			</el-table>
		</div>
		<div class="tableCount">
			<el-table :data="table6" height="327" show-summary :summary-method="getSummaries" border
				style="width:330px">
				<el-table-column label="星期六">
					<el-table-column prop="department" label="科室" width="120"></el-table-column>
					<el-table-column prop="date" label="就诊日期" width="120">
						<template slot-scope="scope">
							{{ formatDate(scope.row.date) }}
						</template>
					</el-table-column>
					<el-table-column prop="number" label="就诊人数" width="120"></el-table-column>
				</el-table-column>
			</el-table>
		</div>
		<div class="tableCount">
			<el-table :data="table7" height="327" show-summary :summary-method="getSummaries" border
				style="width:330px">
				<el-table-column label="星期日">
					<el-table-column prop="department" label="科室" width="120"></el-table-column>
					<el-table-column prop="date" label="就诊日期" width="120">
						<template slot-scope="scope">
							{{ formatDate(scope.row.date) }}
						</template>
					</el-table-column>
					<el-table-column prop="number" label="就诊人数" width="120"></el-table-column>
				</el-table-column>
			</el-table>
		</div>
		<!--  <div class="button">
      <el-button type="primary" size="big" @click="amount">查看总人数</el-button>
    </div> -->
	</div>
</template>

<script type="text/ecmascript-6">
	import {
		api
	} from '../../../global/api.js';
	export default {
		data() {
			return {
				table1: [],
				table2: [],
				table3: [],
				table4: [],
				table5: [],
				table6: [],
				table7: [],
				personSum: [],
				dddd: []
			};
		},
		methods: {
			formatDate(dateStr) {
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '合计';
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						this.personSum = sums[index];
						sums[index] += ' 人';
					} else {
						sums[index] = '';
					}
				});
				return sums;
			}
			// amount () {
			//   alert(this.personSum);
			// }
		},
		created() {
			//查看所有的就诊名单
			let patientCount = "http://localhost:8088/AllPatientCount";
			this.$http.get(patientCount).then((response) => {
				const data = response.body.data.AllPatientCount; // 假设返回的数据是一个对象
				let that = this
				data.forEach((item) => {
					const date = new Date(item.date);
					const dayOfWeek = date.getDay();
					//判断是哪一周的
					if (dayOfWeek == 0) {
						that.table1.push(item)
					} else if (dayOfWeek == 1) {
						that.table2.push(item)
					}else if (dayOfWeek == 2) {
						that.table3.push(item)
					}
					else if (dayOfWeek == 3) {
						that.table4.push(item)
					}
					else if (dayOfWeek == 4) {
						that.table5.push(item)
					}
					else if (dayOfWeek == 5) {
						that.table6.push(item)
					}
					else if (dayOfWeek == 6) {
						that.table7.push(item)
					}

				});
				return
			}, response => {
				// error callback
				this.$message({
					message: '数据请求失败',
					type: 'error'
				});
			});
		}
	};
</script>

<style>
	.patientCount {
		height: 1100px;
	}

	.patientCount .title p {
		font-size: 24px;
		text-align: center;
		margin-bottom: 20px;
	}

	.patientCount .tableCount {
		float: left;
		padding-bottom: 20px;
		padding-left: 80px;
	}
</style>